iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 11
0
自我挑戰組

用Unity製作連線遊戲系列 第 11

GraphQL Codegen

  • 分享至 

  • xImage
  •  

Start with Client

一但決定是用GraphQL進行溝通,接下來就是先找到可以將GraphQL的schema轉換成Code的工具,利用golang的Server可以用gqlgen進行,而Client端,則是用Unity,當然C#是最主要的。GraphQL Code Generator這個工具出來好一陣子了。不過剛開始對於C#的支援度很差,只針對javascript和typescript的語言有良好的程式碼生成。而這次再度訪問,除了網站的風貌變得更加的專對,也看到產生C#的程式碼就放在Live Example當做範例。

既然有C#的程式碼可以被生成出來,可以簡少一些人為撰寫出現的問題,當然是很棒的,再加上它產成出來的程式碼就是昨日試驗的GraphQL Client。看起來就是成套要一起用的工具。所以馬上進入到Docker裡利用這篇安裝文件做為開始。

FROM node:alpine3.10

COPY . .

WORKDIR /project

RUN npm install --save graphql
RUN npm install --save-dev @graphql-codegen/cli
RUN npx graphql-codegen init
RUN npm install --save-dev @graphql-codegen/typescript

這裡在用Docker run時會一直出現錯誤,RUN npx graphql-codegen init註解後就ok了。算是和官方文件第一個不太一樣的步驟,應該是Docker環境下才會碰到的。

接下來自行給了codegen.yml馬上做實驗

  Invalid Codegen Configuration!

        Please make sure that your codegen config file contains either the "schema" field
        or every generated file has its own "schema" field.

        It should looks like that:
        schema:
          - my-schema.graphql

        or:
        generates:
          path/to/output:
            schema: my-schema.graphql

而後又做了些調後也看到這樣的錯誤

Unable to find any GraphQL type definitions for the following pointers

而後就在這裡卡住了很久,中間參考了官方這幾篇文件和GitHub的範例

怎麼看都覺得是codegen.yml那份檔案沒有寫好,最後弄了相當長的時間,終於寫到了正確的yml檔

schema: 'src/**/*.graphql'
documents: 'src/**/*.graphql'
generates:
  src/main/Schema.cs:
    plugins:
      - c-sharp
  src/main/Operations.cs:
    plugins:
      - c-sharp-operations

這裡用的schema.graphql和operation.graphql都是直接從Liev Example上挪下來的,配合這個codegen.yml,終於可以產出和官網上看到一樣的範例。

public class FindUserGQL {
  /// <summary>
  /// FindUserGQL.Request 
  /// <para>Required variables:<br/> { userId=(string) }</para>
  /// <para>Optional variables:<br/> {  }</para>
  /// </summary>
  public static GraphQLRequest Request(object variables = null) {
    return new GraphQLRequest {
      Query = FindUserDocument,
      OperationName = "findUser",
      Variables = variables
    };
  }

  /// <remarks>This method is obsolete. Use Request instead.</remarks>
  public static GraphQLRequest getFindUserGQL() {
    return Request();
  }
  
  public static string FindUserDocument = @"
    query findUser($userId: ID!) {
      user(id: $userId) {
        ...UserFields
      }
    }
    fragment UserFields on User {
      id
      username
      role
    }";
}

配合著Docker將檔案輸出到host,利用昨天學到的方式,終於將一個很簡單但又很費時的工序完成。

FROM node:alpine3.10 as generate
# Some steps here

FROM scratch as generated
COPY --from=generate /project/src/main /
DOCKER_BUILDKIT=1 docker build --target generated --output generated/ .

終於,可以來試golang的server部份了。

Go with gqlgen

在還沒有切入到另一個費時的工作前,想將今日的目標訂制出來。概念上就是在Unity裡,利用被生成出來的GraphQL Operation進行對server的request,而這個server是利用golang加上gqlgen並跑在Docker上的。整個流程就是這樣的單純。

昨天寫的golang hello world,今天要怎麼改成搭配gqlgen的server?

package main

import "fmt"

func main() {
    fmt.Println("Hello world!")
}

先將Dockerfile弄到最簡單的寫法

FROM golang:1.14.3-alpine

WORKDIR /src
COPY . .
RUN go build -o /out/main main.go

而後參考[這篇文章](Adding hot reloading for golang development)用golang內建建的連線先寫下一個簡單的連線版hello world。

DOCKER_BUILDKIT=1 docker image build -t go-app --no-cache .

docker container run -p 8089:8089 -it go-app /bin/sh

雖然離使用GraphQL還有一段距離,但至少是連線版的hello world。但也不清楚下一步要怎麼進行,反正沒有頭緒時直接看gqlgen的教學也是不錯的一個方向。

利用mount volume的方式將目錄放到docker裡,照著教學一步步走,總算是開啓了一個簡單的server。雖然今天想要連接前後,但看樣子沒有足夠的時間,只好明天再試這部份。

Graphql Playground


上一篇
Start with Simple Golang
下一篇
Circling Around
系列文
用Unity製作連線遊戲30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言